<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>画图</title>
</head>

<body>
    <style type="text/css">
        body,
        div,
        svg {
            margin: 0;
            padding: 0;
        }

        svg * {
            fill: none;
            stroke: currentColor;
            overflow: hidden;
        }

        /* Custom  线条粗细 */

        .obturateur {
            stroke-width: 18;
            stroke-miterlimit: 10;
            color: #499C6A;
        }

        #ams {
            background-image: linear-gradient(90deg, #75BB8F 0%, #52B477 67%);
            overflow: hidden;
        }
    </style>
    <div class="ams">
        <svg id="ams" class="obturateur" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100%"
            height="100%" viewBox="0 0 1900 990">
            <!--矩形-->
            <rect x="10" y="10" width="1880" height="970" />
        </svg>
    </div>
    <script src="./jquery-3.2.1.min.js"></script>
    <script>
        var x = document.body.clientWidth;
        var y = document.body.clientHeight;
        console.log(x,y)
        $("#ams").attr('viewBox', '0 0,' + x + ',' + y)
    </script>
</body>

</html>